<template>
  <div>
    <div>
      <el-form ref="form1" :model="form" label-width="80px">
        <el-form-item label="from">
          <el-input v-model="form.from"></el-input>
        </el-form-item>

        <el-form-item label="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item label="gas">
          <el-input v-model="form.gas"></el-input>
        </el-form-item>

        <el-form-item label="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>

        <el-form-item label="artist">
          <el-input v-model="form.artist"></el-input>
        </el-form-item>

        <el-form-item label="imageUrl">
          <el-input v-model="form.imageUrl"></el-input>
        </el-form-item>

        <el-form-item label="metadataUrl">
          <el-input v-model="form.metadataUrl"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="title"
          label="歌名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="artist"
          label="作者"
          width="180">
        </el-table-column>
        <el-table-column
          prop="owner"
          label="拥有者"
          width="180">
        </el-table-column>
        <el-table-column
          prop="sender"
          label="发送者">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import contracts from './contracts';

  export default {
    data() {
      return {
        tableData: [],
        form: {
          from: '',
          password: 's',
          gas: 0,
          logAddress: '0xa929fFF95eb2b7E459D2A2aaB283212e9a34D977',
          title: 'Love is a story',
          artist: 'Mike Drew',
          imageUrl: 'http://www.image.com',
          metadataUrl: 'http://www.metadata.com'
        }
      };
    },
    created: function() {
      this.form.from = this.web3.eth.coinbase;
      if (!this.web3.isAddress(this.form.from)) {
        console.log('from is not a valid address');
        return;
      }
      const logContract = this.web3.eth.contract(contracts.logAbi);
      const l = logContract.at(contracts.logAddr);
      var _this = this;
      l.allEvents({fromBlock: 0, toBlock: 'latest'}, function(error, allEvents) {
        if (!error) {
          console.log(allEvents);
          _this.tableData.push(allEvents.args);
        } else {
          console.log(error);
        }
      });
    },
    methods: {
      submit() {
        try {
          if (!this.web3.isAddress(this.form.from)) {
            console.log('from is not a valid address');
            return;
          }
          this.web3.personal.unlockAccount(this.form.from, this.form.password);
          const workContract = this.web3.eth.contract(contracts.workAbi);
          const workContractData = workContract.new.getData(
            this.form.logAddress,
            this.form.title,
            this.form.artist,
            this.form.imageUrl,
            this.form.metadataUrl,
            {data: contracts.workBin}
          );
          const estimateGas = this.web3.eth.estimateGas({data: workContractData});
          let gas;
          if (this.form.gas >= estimateGas * 5) {
            gas = this.form.gas;
          } else {
            gas = estimateGas * 5;
          }

          workContract.new(
            this.form.logAddress,
            this.form.title,
            this.form.artist,
            this.form.imageUrl,
            this.form.metadataUrl,
            {data: contracts.workBin, gas: gas, from: this.form.from},
            function(err, myContract) {
              console.log(err, myContract);
              if (typeof myContract.address !== 'undefined') {
                console.log('Contract mined! address: ' + myContract.address + ' transactionHash: ' + myContract.transactionHash);
              }
            }
          );

        } catch (e) {
          console.log(e);
        }
      }
    }
  };
</script>
